<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/commonPage/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>联盟最新动态</title>
</head>
<link rel="stylesheet" type="text/css" href="${base }/style/unionDynamic.css" />
<style>
    /*设置context文本内容超出显示省略号（一行）*/
    .div-context{
        white-space: nowrap;/*一行显示*/
        overflow: hidden;
        text-overflow: ellipsis;/*超出部分显示为...*/
    }
    .span_a{
        cursor:pointer;
    }
</style>
<body class="inner-container" style="margin-top: 6%;height: 100%;">
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<div id="list-continer" style="width: 60%; margin: 20px auto 60px;">
    <div class="layui-fluid data-row-transform" style="margin: 20px; border-bottom: solid 1px #ddd; ">
        <div class="layui-row" style="margin-bottom: 10px;">
            <div class="layui-col-md9" style="font-size: 24px;">
                标题
            </div>
            <div class="layui-col-md3" style="text-align: center;">
                时间
            </div>
        </div>
        <div class="layui-row" style=" padding-bottom: 5px;">
            <div class="layui-col-md12">
                正文
            </div>
        </div>
    </div>
</div>
<!-- 存放分页的容器 -->
<div style=" width: 100%; text-align: right; position: fixed; bottom: 10px;">
    <div id="laypage-continer" style="width: 60%;margin: 0 auto;"></div>
</div>

<div id="popupWin" style="margin-top: 8%; padding: 20px;display: none">
    <div style="width: 60%; margin: 20px auto;">
        <div id="detial-title" style="margin: 20px; text-align: center; font-size: 28px;"><b>标题</b></div>
        <div id="detial-time" style="width: 100%; text-align: right;margin: 20px 0 60px; " >发布时间</div>
        <div id="detial-context" style="padding: 4px; height: auto;">正文</div>
    </div>
</div>

</body>
<script>
    //加载总页数
    var total = ${requestScope.total};
    var data;

    layui.use(['laypage'], function() {
        var laypage = layui.laypage;
        $("#laypage-continer").each(function(i,the){
            laypage.render({
                elem: the //注意，这里的 test1 是 ID，不用加 # 号
                ,count: total //数据总数，从服务端得到
                , limit: 8                      //每页显示条数
                , limits: [5, 10, 20]
                , curr: 1                        //起始页
                , groups: 5                      //连续页码个数
                , prev: '上一页'                 //上一页文本
                , netx: '下一页'                 //下一页文本
                , first: 1                      //首页文本
                , last: 100                     //尾页文本
                , layout: ['prev', 'page', 'next','refresh','skip']
                //跳转页码时调用
                , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
                        //清空以前加载的数据
                        $('#list-continer').empty();
                        //调用加载函数加载数据
                        showReocrd(obj.curr,obj.limit);
                }
            });
        })
    })

    // 加载数据
    function showReocrd(page,limits){
        $.get("${base}/information/listInfomationByPage",
            {
                page:page,
                limits:limits
            },
            function (res) {
                if (res.code===0) {
                    data=res.data;
                    fillData(data);
                } else {
                    layer.msg("数据加载异常！");
                }
            },
            "json"
        );
    }

    //填充数据
    function fillData(data) {
        $("#list-continer").html('');
        $.each(data, function (index, obj) {
            var info = '';
            info += '<div class="layui-fluid span_a data-row-transform" onclick="detialInfomation(this)" ' +
                'style="margin: 40px; border-bottom: solid 1px #ddd;"><p id="info-id" class="layui-hide">' + obj.id + '</p>';
            info += '<div class="layui-row" style="margin-bottom: 10px;">';
            info += '<div class="layui-col-md9" style="font-size: 24px;">';
            info += '<span>'+obj.title+'</span></div>';
            info += '<div class="layui-col-md3" style="text-align: center;">';
            info += '<span>'+dateFormat(obj.time)+'</span></div></div>';
            info += '<div class="layui-row" style=" padding-bottom: 5px;">';
            info += '<div class="layui-col-md12 div-context">';
            info += '<span>'+delHtmlTag(obj.context)+'</span></div></div></div>';
            $("#list-continer").append(info);
        });
    }

    // 显示详细内容
    function detialInfomation(elem) {
        var infomation = data.find(function(d) { //获取点击最新新闻所对应的数据
            return d.id == $($(elem).find("#info-id")[0]).html();
        });
        $("#footer-div" , parent.document).addClass('layui-hide');
        clearDetialDiv();
        fillDetialDiv(infomation);
        layer.open({
            type: 1
            ,title : false
            ,closeBtn : false
            ,area: ['100%','100%']
            , btnAlign: 'c',
            content: $("#popupWin"),  //弹出窗口
            btn:'关闭',
            yes : function(index, layero) {
                $("#footer-div" , parent.document).removeClass('layui-hide');
                layer.close(index);
            }
        })
    }

    function clearDetialDiv() {
        $("#detial-title").html('');
        $("#detial-time").html("");
        $("#detial-context").html("");
    }
    
    function fillDetialDiv(data) {
        $("#detial-title").html(data.title);
        $("#detial-time").html(dateFormat(data.time).substr(0, 4) + '年' + dateFormat(data.time).substr(5, 2) + '月' + dateFormat(data.time).substr(8, 2));
        $("#detial-context").html(data.context);
    }
    

</script>
</html>